<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>我的订单</title>
<%--    <style>--%>
<%--        /* 外部CSS样式表示例 */--%>
<%--        body {--%>
<%--            font-family: Arial, sans-serif;--%>
<%--        }--%>
<%--        .container {--%>
<%--            width: 90%;--%>
<%--            margin: auto;--%>
<%--            overflow: hidden;--%>
<%--        }--%>
<%--        h2 {--%>
<%--            color: #333;--%>
<%--            text-align: center;--%>
<%--            margin-bottom: 20px;--%>
<%--        }--%>
<%--        .table {--%>
<%--            width: 100%;--%>
<%--            margin-bottom: 20px;--%>
<%--            border-collapse: collapse;--%>
<%--        }--%>

<%--        .table-bordered {--%>
<%--            border: 1px solid #ddd;--%>
<%--        }--%>
<%--        .table-bordered th,--%>
<%--        .table-bordered td {--%>
<%--            border: 1px solid #ddd;--%>
<%--            text-align: left;--%>
<%--            padding: 8px;--%>
<%--        }--%>
<%--        .table-hover tbody tr:hover {--%>
<%--            background-color: #f5f5f5;--%>
<%--        }--%>
<%--        th {--%>
<%--            background-color: #f0f0f0;--%>
<%--            color: #333;--%>
<%--        }--%>
<%--        td p {--%>
<%--            margin: 0;--%>
<%--        }--%>
<%--        /* 订单状态颜色 */--%>
<%--        span.status-paid {--%>
<%--            color: red;--%>
<%--        }--%>
<%--        span.status-shipped {--%>
<%--            color: green;--%>
<%--        }--%>
<%--        span.status-completed {--%>
<%--            color: black;--%>
<%--        }--%>
<%--        /* 支付方式颜色或样式 */--%>
<%--        .pay-type-wechat {--%>
<%--            color: green;--%>
<%--        }--%>
<%--        .pay-type-alipay {--%>
<%--            color: blue;--%>
<%--        }--%>
<%--    </style>--%>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
<jsp:include page="indexHeader.jsp"></jsp:include>
<div class="cart-items">
<div class="container">
    <h2>我的订单</h2>
    <table  class="table table-bordered table-hover">
        <tr>
            <th width="10%">ID</th>
            <th width="10%">总价</th>
            <th width="20%">商品详情</th>
            <th width="30%">收货信息</th>
            <th width="10%">订单状态</th>
            <th width="10%">支付方式</th>
            <th width="10%">下单时间</th>
        </tr>
        <c:forEach items="${orderList}" var="order">
            <tr>
                <td><p>${order.id}</p></td>
                <td><p>${order.total }</p></td>
                <td>
                    <c:forEach items="${order.orderitem}" var="item">
                        <p>${item.goodsName }(${item.price }) x ${item.amount }</p>
                    </c:forEach>
                </td>
                <td>
                    <p>${order.name }</p>
                    <p>${order.phone }</p>
                    <p>${order.address }</p>
                </td>
                <td>
                    <p>
                        <c:if test="${order.status==2 }"><span class="status-paid">已付款</span></c:if>
                        <c:if test="${order.status==3 }"><span class="status-shipped">已发货</span></c:if>
                        <c:if test="${order.status==4 }"><span class="status-completed">已完成</span></c:if>
                    </p>
                </td>
                <td>
                    <p>
                        <c:if test="${order.paytype==1 }"><span class="pay-type-wechat">微信</span></c:if>
                        <c:if test="${order.paytype==2 }"><span class="pay-type-alipay">支付宝</span></c:if>
                    </p>
                </td>
                <td><p>${order.datetime }</p></td>
            </tr>
        </c:forEach>
    </table>
</div>
</div>
<jsp:include page="indexFooter.jsp"></jsp:include>
</body>
</html>
